<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script type="text/javascript" src="js/global.js"></script>
		<link rel="stylesheet" href="./layui/css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>

	<body>
		<div hidden="hidden" class="layui-form-item" style="margin-top: 20px">
			<label class="layui-form-label">ID：</label>
			<div class="layui-input-inline" style="width: 350px">
				<input type="text" name="id" id="userid" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
			</div>
		</div>
		</div>
		<div style="margin-top: 20px" id="test4" class="demo-transfer"></div>
		<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
		<!--<legend>数据格式解析</legend>-->
		<!--</fieldset>-->

		<script src="./layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
			layui.use(['transfer', 'layer', 'util', 'form'], function() {
				var $ = layui.$,
					transfer = layui.transfer,
					layer = layui.layer,
					form = layui.form,
					util = layui.util;
				//解决跨域
				$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
					options.xhrFields = {
						withCredentials: true
					}
				})
				var userroles = []; //存储用户拥有的角色
				var datass = []; //存储所有角色id名称
				var datas = []; //存储所有角色id名称
				var ids = []; //用来存储角色id
				function getReole() { //延迟加载

					var userid = document.getElementById("userid").value; //当前用户的id
					$.ajax({
						url: globalData.server + "./roles/getAllRoles", //根据用户拿到所有角色
						type: 'post',
						dataType: 'json',
						data: {
							"userId": userid
						},
						success: function(data) {
							for(var i in data.data) {
								userroles.push("" + data.data[i].id + ""); //拿到的数据放入数组中
							}
						},
						error: function(e) {
							alert('请求失败')
						}
					});
					$.ajax({
						url: globalData.server + './roles/getAllRolesAlls', //拿到所有角色
						type: 'post',
						dataType: 'json',
						success: function(data) {
							for(var i in data.data) {
								datas = { //存储所有角色id名称
									value: data.data[i].id, //角色的id id是自己数据库的id名
									title: data.data[i].name //角色名称
								}
								datass.push(datas); //把拿到的所有角色id名称 放到数组
							}

							setTimeout(function() {
								//穿梭时的回调
								transfer.render({
									elem: '#test4',
									data: datass,
									title: ['系统所有角色', '当前用户角色'],
									value: userroles,
									onchange: function(obj, index) {
										for(var i in obj) {
											ids.push(obj[i].value)
										}
										var arr = ['系统所有角色', '当前用户角色'];
										//layer.alert('来自 <strong>' + arr[index] + '</strong> 的数据：' + JSON.stringify(obj)); //获得被穿梭时的数据
										if(arr[index] == '系统所有角色') {
											$.ajax({
												url: globalData.server + 'UserRoles/addUsersByIdRoles', //用户添加角色
												type: 'post',
												dataType: 'json',
												data: {
													"userId": userid, //用户id
													"roleId": ids, //角色id
													'ids': JSON.stringify(ids),
												},
												success: function(data) {
													//												alert(data.msg);
													ids = [];
												},
												error: function(e) {
													alert('请求失败')
												}
											});
										} else {
											$.ajax({
												url: globalData.server + 'UserRoles/removeUsersByIdRoles', //用户移除角色
												type: 'post',
												dataType: 'json',
												data: {
													"userId": userid, //用户id
													"roleId": ids, //角色id
													'ids': JSON.stringify(ids)
												},
												success: function(data) {
													//												alert("成功");
													ids = [];
												},
												error: function(e) {
													alert('请求失败')
												}
											});
										}

									}
								})
							}, 500);
						},
						error: function(e) {
							alert('请求失败')
						}
					});
				}
				setTimeout(function() {
					//					延迟加载
					getReole();
				}, 500);
			});
		</script>

	</body>

</html>